require('../css/mine-edit.less')


// 入口函数
document.ready(function () {
    let user = JSON.parse(localStorage.getItem("user")).userId;
    // 声明一个存储个人信息的对象
    let person = {
        userId: user,
        nickname: '',
        gender: '',
        birthday: '',
        address: '',
        sign: ''
    }

    // 1.0 点击返回
    const backBox = document.querySelector('#back')
    backBox.addEventListener('click', function (e) {
        history.back();
        e.stopPropagation()
    })


    // 2.0 选择性别
    const showPicker = document.querySelector('#showPicker')
    showPicker.addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                // 保存信息
                person.gender = result[0].label;
                // console.log(result[0].label);
                // 渲染数据
                showPicker.textContent = result[0].label;
            }
        })
    })



    // 3.0 生日选择
    const showDatePicker = document.querySelector('#showDatePicker')
    const birthdayData = document.querySelector('#birthdayData')
    showDatePicker.addEventListener('click', function () {
        let arr = []
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                result.forEach(function (k) {
                    // console.log(window.$check.add0(k.value));
                    arr.push(window.$check.add0(k.value))
                })

                person.birthday = arr.join("-")
                // console.log(person.birthday);
                birthdayData.textContent = arr.join("-")
            }
        })
    })

    // 4.0 选择城市
    const showCityPicker = document.querySelector('#showCityPicker')
    const cityData = document.querySelector('#cityData')
    showCityPicker.addEventListener('click', function () {

        // 获取省份
        window.$http.get("/address/province", function (res) {
            let arr = [];
            if (res.status === 0) {
                res.data.forEach(function (k) {
                    arr.push({
                        label: k.name,
                        value: k.addressId
                    })
                })
                weui.picker(arr, {
                    onConfirm: function (data1) {
                        // console.log(data1);
                        // 获取城市
                        window.$http.get("/address/city/" + data1[0].value, function (res) {
                            // console.log(res);
                            let arr1 = [];
                            if (res.status === 0) {
                                res.data.forEach(function (item) {
                                    arr1.push({
                                        label: item.name,
                                        value: item.addressId
                                    })
                                })
                                setTimeout(function () {
                                    weui.picker(arr1, {
                                        // 确认之后会触发这个事件
                                        onConfirm: function (data2) {
                                            console.log('省份是--->', data1);
                                            console.log('市区是--->', data2);
                                            cityData.textContent = data1[0].label + data2[0].label
                                            person.address = [data1[0].label, data2[0].label]
                                            console.log(person.address);
                                        }
                                    })
                                }, 500)

                            }
                        })
                    }
                })

            }
        })

    })

    // 个人签名
    const signature = document.querySelector("#signature");
    const numBox = document.querySelector(".num-box")
    signature.addEventListener("blur", function () {
        person.sign = this.value;
        // console.log(person.sign);
    })



    // 个人昵称
    const nickname = document.querySelector(".nickname");
    nickname.addEventListener("blur", function () {
        person.nickname = this.value;
        // console.log(person.nickname);
    })

    // 保存按钮
    const saveBtn = document.querySelector("#saveBtn");
    saveBtn.addEventListener("click", function () {
        window.$http.post("/users/userEdit", person,
            function (res) {
                if (res.status === 0) {
                    window.$check.toast(0, "保存成功");
                    location.reload();
                }
            })
    })



    // 从服务器获取数据 渲染页面
    window.$http.get("/users/accountinfo?userId=" + user, function (res) {
        if (res.status === 0) {
            console.log(res);
            nickname.value = res.data.nickname;
            showPicker.textContent = res.data.gender;
            birthdayData.textContent = res.data.birthday.substr(0, 10);
            cityData.textContent = res.data.address.replace(",", " ");
            signature.value = res.data.sign;


            let len = signature.value.length;
            numBox.textContent = len
            signature.addEventListener("input", function () {
                len = this.value.length;
                numBox.textContent = len
                // console.log(len);
            })
        }
    })


})
